<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>同道</title>
	<link rel="stylesheet" href="css/mui.min.css" />
	<!-- build:css css/app.css -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/common.css" />
	<!-- endbuild -->
	<style>
		body,
		.mui-content {
			background: #ffffff;
		}
	</style>
</head>

<bod>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">登录</h1>
	</header>
	<div class="mui-content login">
		<!--logo-->
		<div class="logo">
			<img src="img/icon_touxiang.png" alt="logo" />
		</div>
		<div class="mui-slider mui-form">
			<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#item1" active="0">密码登录</a>
				<a class="mui-control-item" href="#item2" active="1">验证码登录</a>
			</div>
			<div class="mui-slider-group">
				<!--password login-->
				<div id="item1" class="mui-slider-item mui-control-content mui-active">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<input type="tel" class="mui-input-clear phone" placeholder="请输入手机号" maxlength="11">
						</div>
					</form>
					<form class="mui-input-group">
						<div class="mui-input-row">
							<input type="password" class="mui-input-clear password" maxlength="18" placeholder="请输入密码">
						</div>
					</form>
				</div>
				<!--code login-->
				<div id="item2" class="mui-slider-item mui-control-content">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<input type="tel" class="mui-input-clear phone" placeholder="请输入手机号" maxlength="11">
						</div>
					</form>
					<form class="mui-input-group">
						<div class="mui-input-row">
							<input type="text" class="code" placeholder="请输入验证码" maxlength="6">
							<span id="getCode" class="get-code">获取验证码</span>
							<span id="codeDate" class="get-code mui-hidden">180s</span>
						</div>
					</form>
				</div>
			</div>
			<div class="form-function">
				<button type="button" class="mui-btn-link mui-btn-paw"
					onclick="location.href='forgetpassword.html'">忘记密码？</button>
				<button type="button" class="mui-btn-link mui-btn-in"
					onclick="location.href='register.html'">注册</button>
			</div>
			<button type="button" id="login" data-loading-text="提交中"
				class="button button-red mui-btn mui-btn-block">登录</button>
		</div>
	</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/zepto.min.js"></script>
	<!-- build:js js/app.js -->
	<script src="js/api.js"></script>
	<script src="js/tools.js"></script>
	<!-- endbuild -->
	<script>
		mui.ready(function () {
			var phone = $('.phone');
			var password = $('.password');
			var code = $('.code');

			// 绑定两个输入框的值 解决多次判断问题
			phone.keyup(function () {
				phone.val($(this).val());
			});
			// 获取验证码
			$('#getCode').on('tap', function () {
				window.getCode(phone.val(), 1)
			})
			// 登录
			$('#login').on('tap', function () {
				var url = '';
				var data = {
					phone: phone.val()
				};

				if (isPhone(phone.val()) == false) {
					return false
				}
				// 密码登录
				if (!parseInt($('.mui-active').attr('active'))) {
					url = 'h5/h5UserLogin';
					if (isPassword(password.val()) == false) {
						return false
					}
					data.password = password.val();
					// 验证码登录
				} else {
					url = 'h5/h5UserMsgLogin'
					if (code.val() == '') {
						mui.toast('请输入验证码！');
						return false
					}
					data.msg = code.val();
				}
				// 登录
				mui.ajax(config.ME_API + url, {
					type: 'post',
					data: data,
					async: true,
					success: function (res) {
						if (res.code == 2) {
							mui.toast('登录成功!')
							window.localStorage.removeItem('h5_rid');
							window.localStorage.setItem('h5_userId', res.data.userId);
							setTimeout(function () {
								mui.openWindow('index.html')
							}, 500)
						} else {
							mui.toast(res.msg)
						}
					},
					err: function (err) {
						console.log(err)
					}
				})
			})
		})
	</script>

</html>